<template>
	<div class="articleMsg" v-loading="loading">
		<div class="search">
			<el-form :inline="false" :model="formInline" ref="formInline" class="demo-form-inline">
				<el-form-item label="文章名：" prop='title'>
					<el-input v-model="formInline.title" placeholder="文章名："></el-input>
				</el-form-item>
				<el-form-item label="审核状态：" prop='audit'>
					<el-select v-model="formInline.audit" placeholder="审核状态">
					<el-option label="待审核" value="0"></el-option>
					<el-option label="审核通过" value="1"></el-option>
					<el-option label="审核不通过" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
					<el-button @click="resetForm('formInline')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="table">
			<div style="margin-bottom:20px">
                <el-button type="primary" @click="addNewArticle">新增文章</el-button>
            </div>
			<el-table :data="tableData" style="width: 100%" align=right>
				<el-table-column fixed type="index" label="序号" width="100px" align="center" />
				<el-table-column fixed prop="artname" label="文章名" show-overflow-tooltip width="360px"></el-table-column>
				<el-table-column prop="author" label="作者" show-overflow-tooltip >
				</el-table-column>
				<el-table-column prop="addTime" label="创建时间">
				</el-table-column>
				<el-table-column prop="audit" label="审核状态" width="140">
					<template #default="scope">
					    <span v-if="scope.row.audit === '0'" style="color: #FFC300;">待审核</span>
						<span v-else-if="scope.row.audit === '1'" style="color: #60DBB0;">审核通过</span>
						<span v-else-if="scope.row.audit === '2'" style="color: #FF4F6D;">审核不通过</span>
					</template>
				</el-table-column>
				<el-table-column prop="auditTime" label="审核时间">
					<template #default="scope">
					    <span v-if="scope.row.auditTime !== ''">{{ scope.row.auditTime }}</span>
					    <span v-else>--</span>
					</template>
				</el-table-column>
				<el-table-column label="启用" align='center'>
					<template #default="scope">
					    <span v-if="scope.row.using === false && scope.row.audit == '1'" style="color: #60DBB0;">
							<el-button
							    size="small"
							    type="primary"
								plain
								text="primary"
								bg
								@click="changeUse(scope.row.id, true)"
							>启用</el-button>
						</span>
						<span v-if="scope.row.using === true && scope.row.audit == '1'" style="color: #FF4F6D;">
							<el-button
							    size="small"
								plain
								text="primary"
								bg
								@click="changeUse(scope.row.id, false)"
							>禁用</el-button>
						</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align='center' >
					<template #default="scope">
					    <el-button type="text" size="default" @click="audit(scope.row.id)" v-if="scope.row.audit !== '0'">详情</el-button>
						<el-button type="text" size="default" @click="deleteArt(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page" style="height:100px">
			<el-pagination background 
				layout="prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:total="total"
				:page-size='10'
				:current-page="currentPage"
			/>
		</div>
	</div>
</template>

<script>
	import { getArticleList, editArticle, getMyArticle, deletArticle, getFuzzyQueryArticle } from '../../request/api/articleMange/articleMange.js'
	import { getCurrentTime } from '../../utils/index.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
	export default {
		name: 'myArticle',
		components: {},
		data() {
			return {
				formInline: {
					title: '',
					author: this.$store.state.username.name,
					audit: '',
				},
				currentPage: 1, // 当前页
				pageSize: 10, // 每页显示14条数据
				total: 0, // 总数
				tableData: [
                    {
                        artname: '王二狗的幸福生活',
                        author: '王小虎',
                        addTime: '2016-05-04',
                        audit: '0',
                        auditTime: '2016-05-08',
                        using: false
				    }
                ],
                loading: false
			}
		},
		created() {
			this.articleData()
		},
		methods: {
			// 获取文章列表
			async articleData() {
                this.loading = true
                let author = localStorage.getItem("username")
				const { data } = await getMyArticle({
					currentPage: this.currentPage,
					pageSize: this.pageSize,
                    author: this.$store.state.username.name
				})
				if (data) {
					this.total = data.total
					const list = data.articleList.map(i => {
						return {
							id: i.id,
							artname: i.title,
							author: i.author,
							addTime: i.addTime,
							audit: i.audit,
							auditTime: i.auditTime,
							using: i.using
						}
					})
					this.tableData = list
                    this.loading = false
				} else {
                    this.loading = false
                }
			},
			//新增
			addNewArticle(){
				this.$router.push({ path:'/home/manage/addNewArticle' })
			},
			// 审核
			audit(id) {
				this.$router.push({path: '/home/manage/detail', query: {id, pathname: this.$route.name}})
			},
            // 删除
            async deleteArt(id) {
                ElMessageBox.confirm(
				    '是否确认删除?',
				    'Warning',
				    {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning',
				    }
				)
				.then(() => {
					deletArticle({id})
					.then(res => {
						if (res.data) {
						    if (res.data.code == 0) {
								ElMessage({
									type: 'success',
									message: '删除成功',
								})
						        this.articleData()
						    }
						} else {
						    this.$message({
						        message: '删除失败',
						        type: 'warning'
						    })
						}
					})
					.catch(err => {})
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '删除取消',
					})
				})
            },
			// 启用/禁用
			changeUse(id, flag) {
				const obj = {
					id,
					using: flag
				}
				editArticle(obj).then(res => {
					const { data } = res
					if (data) {
						if (data.code === 0) {
							this.$message({
								message: '更改成功',
								type: 'success'
							})
							if (this.formInline.title || this.formInline.author || this.formInline.audit) {
								this.onSearch()
							} else {
								this.articleData()
							}
						}
					} else {
						this.$message({
							message: '更改失败',
							type: 'warning'
						})
					}
				})
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			// 格式化
			formatter(row) {
			    switch(row.audit) {
			        case '0': 
			            return '待审核';
			        case '1': 
			            return '审核通过';
			        case '2': 
			            return '审核不通过';
			        default: 
			            return ;
			    }
			},
            handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {
				if (this.formInline.title || this.formInline.author || this.formInline.audit) {
					this.formInline.currentPage = val
					this.onSearch()
				} else {
					this.currentPage = val
					this.articleData()
				}	
			},
			// 查询
			async onSearch() {
				const form = this.formInline
				// 格式化处理状态值
				for (const [key, value] of Object.entries(form)) {
					if (key === 'using' &&  value != '') {
						form[key] = value === 'true' ? true : false
					}
				}
				const {data} = await getFuzzyQueryArticle(form)
				if (data?.code === 0) {
					const list = data.data.map(i => {
						return {
							id: i.id,
							artname: i.title,
							author: i.author,
							addTime: i.addTime,
							audit: i.audit,
							auditTime: i.auditTime,
							using: i.using
						}
					})
					this.tableData = list
                    this.loading = false
				}
			},
			// 重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.articleData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.articleMsg {
		width: 100%;
		height: 100%;
        background-color: #F1F5F9 !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		.search {
			flex: 3;
            margin-bottom: 8px;
            overflow: hidden;
            background-color: #fff;
            border-radius: 4px;
			padding: 12px;
			min-height: 50px;
			max-height: 50px;
			.el-form {
				width: 96%;
				display: flex;
				justify-content:space-between;
				align-items: center;
				height: 50px;
				line-height: 50px;
				.el-form-item {
					display: flex;
					--font-size: 14px;
					margin-bottom: 0px; 
				}
			}
		}
		.table {
			flex: 16;
			// border: 1px solid #e0e0e0;
			padding: 12px;
			border-radius: 4px;
			background-color: #fff;
		}
		.page {
			flex: 1;
			padding: 12px;
			background-color: #fff;
			box-sizing: border-box;
				.el-pagination {
					float: right;
			}
		}
	}
</style>
